import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { AlbumsWrapper } from './style';
import { getImgOnSize } from '@/utils/format';
import { useAppDispatch } from '@/store/hooks';
import { getAlbum, getAllAlbum, getAllSongs } from '@/service';
import { changeSongs } from '@/views/player/store/player';
import { Link } from 'react-router-dom';
import { setCurrentSongs, setKind } from '@/views/detail/store/detail';
import playerbar from '@/views/player/playerbar';
interface IProps {
  children?: ReactNode;
  item: any;
}

const AlbumItem: FC<IProps> = (props) => {
  const { item } = props;
  const dispatch = useAppDispatch();
  async function handleClick() {
    const res: any = await getAllAlbum(item.id);
    // console.log('handleClick', res);
    dispatch(changeSongs(res.songs));
  }

  async function handleRedirectClick() {
    const res: any = await getAlbum(item.id);
    dispatch(
      setCurrentSongs({
        album: res.album,
        size: res.album.size,
        playCount: res.album.shareCount,
        songs: res.songs,
        id: res.album.id,
      })
    );
    dispatch(setKind('album'));
  }

  return (
    <AlbumsWrapper>
      <div className="image">
        <img src={getImgOnSize(item.picUrl, 100)} />
        <Link className="sprite_cover img-cv" to="/detail" onClick={handleRedirectClick}></Link>
        <a className="sprite_icon img-sd" onClick={handleClick}>
          {' '}
        </a>
      </div>
      <a className="a-album">{item.name}</a>
      <a className="a-artist">{item.artist.name}</a>
    </AlbumsWrapper>
  );
};

export default memo(AlbumItem);
